<template >
  <a-calendar v-model:value="value"   @panelChange="onPanelChange" > 
    <template #dateCellRender="{ current: value }">
      <ul class="events">
        <li v-for="item in getListData(value)" :key="item.content">
          <a-badge :status="item.type" :text="item.content" />
        </li>
      </ul>
    </template>
    <!-- <template #monthCellRender="{ current: value }">
      <div v-if="getMonthData(value)" class="notes-month">
        <section>{{ getMonthData(value) }}</section>
        <span>Backlog number</span>
      </div>
    </template> -->
  </a-calendar>
</template>
<script>
import { request } from "../../utils/request";
import { ref } from 'vue';
export default {
 data() {
    return {
      value :ref(),
      year: '',
      datas:[],
      currentDatas:[],
      cacheDatas:{} //缓存数据
    };
  },
  mounted(){
     this.init();
  },
  methods:{
    init(){
      var date = new Date();
      this.year = date.getFullYear();
      if(this.cacheDatas[this.year]) {

      } else {
        request({
          url: `/api/nianxiujia?year=${this.year}`,
          method: "get",
        }).then((res)=>{
          this.cacheDatas[this.year] = res;
          this.datas=res;
        })

      }
     
  },
  getListData(value) { //处理日期天数
      let num = 0;
      let person =[];
      let listData=[];
      const listYear = this.formatDate(value._d).split('-')[0];
      if(this.cacheDatas[listYear]) {
        this.cacheDatas[listYear].forEach(e=>{
          if(this.formatDate(value._d) == e.tongjiDate){
            num++
            person.push(e.personname)
          }
        })
        person.unshift(num)
        person.forEach(v=>{
          listData.push({
            content:v
          })
        })
      }
      
      return listData || [];
    },
  formatDate(date) { // 将时间转换成字符串　　
  　　var y = date.getFullYear(); 
      var m = date.getMonth() + 1;  
          m = m < 10 ? ('0' + m) : m;  
      var d = date.getDate();  
          d = d < 10 ? ('0' + d) : d;  
      var h = date.getHours();  
          h=h < 10 ? ('0' + h) : h;  
      var minute = date.getMinutes();  
          minute = minute < 10 ? ('0' + minute) : minute;  
      var second=date.getSeconds();  
          second=second < 10 ? ('0' + second) : second;  
      return y + '-' + m + '-' + d; 
      // return y + '-' + m + '-' + d + ' '+h+':'+minute+':'+second; 
    },
    getMonthData(value){ //年月
    
      if (value.month() === 8) {
        return 1394;
      }
    },
    onPanelChange (value, mode) {
      this.year = this.formatDate(value._d).split('-')[0];
      if(this.cacheDatas[this.year]) {

      } else {
        request({
          url: `/api/nianxiujia?year=${this.year}`,
          method: "get",
        }).then((res)=>{
          this.cacheDatas[this.year] = res;
          this.datas=res;
        })
      }
    
    },
   
  }
};
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
/deep/ .ant-fullcalendar-header .ant-radio-group{
  display: none;
}
/deep/ .ant-badge-status-text {
    /* margin-left: 8px; */
    color: #48affa;
    /* font-size: 30px; */
}
/* /deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-content{
  text-align: center;
}
/deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-content{
  line-height: 65px;
} */
</style>